<script setup>
import {getToken, renderIcon} from "@/utils";
import {onMounted, watch} from "vue";
import api from "@/api";
import {NButton, NForm, NFormItem, NImage, NInput, NSelect, useMessage} from "naive-ui";
import TheIcon from "@/components/icon/TheIcon.vue";
const base_path = import.meta.env.VITE_BASE
const message = useMessage()
const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const emit = defineEmits(['call-parent'])

const data = reactive({
  uploadAction: base_path+'/system/base/userimg',
  token: getToken(),
  select_customer: {
    name:'',
    bi_date:null,
    mobile:'',
    birth:null,
    age:'',
    sex:'',
    height:'',
    weight:'',
    BMI:'',
    blood:'',
    pulse:'',
    complaint:'',
    test:'',
    solution:'',
    CE:null,
    RSD:null,
    GI:null,
    GUD:null,
    MSD:null,
    AID:null,
    CI:null,
    GYN:null,
    PMH:'',
    SHx:'',
    AH:'',
    ASHx:'',
    Meds_Hx:'',
    BTHx:'',
    HTHx:'',
    ETOH:'',
    SMK:'',
    DIET:'',
    EX:'',
    PE_Freq:'',
    SCT:'',
    DON:'',
    LMP:'',
    TON:'',
    OBHx:'',
    TTC:'',
    PREG:'',
    FMHx:null,
    TxE:'',
    files:'',
  },
  is_edit: false,
  config: [],
  user_all: [],
  search_loading: false,
  card_loading:false,
  table_select:{
    sexs: [
        {
          value: '男',
        },
        {
          value: '女',
        },
    ],
    CE: [
        {
          value: '无',
        },
        {
          value: '冠心病',
        },
        {
          value: '高血压',
        },
        {
          value: '高血脂',
        },
        {
          value: '糖尿病',
        },
        {
          value: '其他',
        },
    ],
    RSD: [
        {
          value: '无',
        },
        {
          value: '肺结节',
        },
        {
          value: '哮喘',
        },
        {
          value: '慢性咽炎',
        },
        {
          value: '慢性支气管炎',
        },
        {
          value: '过敏性鼻炎',
        },
        {
          value: '其他',
        },
    ],
    GI: [
        {
          value: '无',
        },
        {
          value: '胃溃疡',
        },
        {
          value: '胆囊炎',
        },
        {
          value: '脂肪肝',
        },
        {
          value: '肝硬化',
        },
        {
          value: '乙肝',
        },
        {
          value: '丙肝',
        },
        {
          value: '慢性胃炎',
        },
        {
          value: '慢性肠炎',
        },
        {
          value: '其他',
        },
    ],
    GUD: [
        {
          value: '无',
        },
        {
          value: '慢性肾炎',
        },
        {
          value: '肾功能不全',
        },
        {
          value: '泌尿系统结石',
        },
        {
          value: '前列腺增生',
        },
        {
          value: '其他',
        },
    ],
    MSD: [
        {
          value: '无',
        },
        {
          value: '颈椎病',
        },
        {
          value: '腰椎病',
        },
        {
          value: '骨关节炎',
        },
        {
          value: '半月板损伤',
        },
        {
          value: '其他',
        },
    ],
    AID: [
        {
          value: '无',
        },
        {
          value: '系统性红斑狼疮',
        },
        {
          value: '类风湿性关节炎',
        },
        {
          value: '强直性脊柱炎',
        },
        {
          value: '荨麻疹',
        },
        {
          value: 'HIV',
        },
        {
          value: '荨麻疹',
        },
        {
          value: '甲亢',
        },
        {
          value: '甲减',
        },
        {
          value: '皮肌炎',
        },
        {
          value: '其他',
        },
    ],
    CI: [
        {
          value: '无',
        },
        {
          value: '肿瘤',
        },
        {
          value: '大肠',
        },
        {
          value: '肝',
        },
        {
          value: '肺',
        },
        {
          value: '乳腺',
        },
        {
          value: '甲状腺',
        },
        {
          value: '前列腺',
        },
        {
          value: '胃',
        },
        {
          value: '其他',
        },
    ],
    GYN: [
        {
          value: '无',
        },
        {
          value: '子宫肌瘤',
        },
        {
          value: '乳腺增生',
        },
        {
          value: '乳房结节',
        },
        {
          value: '妇科炎症',
        },
    ],
    PMH: [
        {
          value: '无',
        },
        {
          value: '有',
        },
    ],
    SHx: [
        {
          value: '无',
        },
        {
          value: '有',
        },
    ],
    AH: [
        {
          value: '无',
        },
        {
          value: '不详',
        },
        {
          value: '有',
        },
    ],
    ASHx: [
        {
          value: '无',
        },
        {
          value: '不详',
        },
        {
          value: '有',
        },
    ],
    Meds_Hx: [
        {
          value: '无',
        },
        {
          value: '有',
        },
    ],
    BTHx: [
        {
          value: '无',
        },
        {
          value: '有',
        },
    ],
    HTHx: [
        {
          value: '无',
        },
        {
          value: '不详',
        },
        {
          value: '有',
        }
    ],
    ETOH: [
        {
          value: '不饮酒',
        },
        {
          value: '1-10次/月',
        },
        {
          value: '11-20次/月',
        },
        {
          value: '21-30次/月',
        },
    ],
    SMK: [
        {
          value: '从不吸烟',
        },
        {
          value: '过去吸,现在已戒烟',
        },
        {
          value: '半包/天',
        },
        {
          value: '半包1包/天',
        },
        {
          value: '>1包/天',
        },
        {
          value: '不是每天吸',
        },
    ],
    DIET: [
        {
          value: '荤素均衡',
        },
        {
          value: '荤食为主',
        },
        {
          value: '素食为主',
        },
        {
          value: '嗜盐',
        },
        {
          value: '嗜油',
        },
        {
          value: '嗜糖',
        },
        {
          value: '嗜其他',
        },
    ],
    EX: [
        {
          value: '不规律',
        },
        {
          value: '不运动',
        },
        {
          value: '每天',
        },
        {
          value: '5-6天/周',
        },
        {
          value: '3-4天/周',
        },
        {
          value: '1-2天/周',
        },
        {
          value: '少于1天/月',
        },
        {
          value: '1-3天/月',
        },
    ],
    PE_Freq: [
        {
          value: '每年1次',
        },
        {
          value: '两年1次',
        },
        {
          value: '两年以上1次',
        },
        {
          value: '从未护士',
        },
    ],
    SCT: [
        {
          value: '自体干细胞',
        },
        {
          value: '脐带干细胞',
        },
        {
          value: '脂肪干细胞',
        },
        {
          value: '无',
        },
    ],
    DON: [
        {
          value: '本人',
        },
        {
          value: '亲属',
        },
    ],
    LMP: [
        {
          value: '规律',
        },
        {
          value: '不规律',
        },
        {
          value: '绝经',
        },
        {
          value: '不详',
        },
    ],
    TON: [
        {
          value: '偶尔',
        },
        {
          value: '近期使用',
        },
        {
          value: '常年使用',
        },
        {
          value: '不使用',
        },
    ],
    OBHx: [
        {
          value: '未婚',
        },
        {
          value: '已婚',
        },
    ],
    TTC: [
        {
          value: '是',
        },
        {
          value: '否',
        },
    ],
    PREG: [
        {
          value: '是',
        },
        {
          value: '否',
        },
    ],
    FMHx: [
        {
          value: '无',
        },
        {
          value: '不详',
        },
        {
          value: '高血压',
        },
        {
          value: '糖尿病',
        },
        {
          value: '脑中风',
        },
        {
          value: '冠心病或心肌梗塞',
        },
        {
          value: '其他心脏疾病',
        },
        {
          value: '高胆固醇/高血压',
        },
        {
          value: '肾脏疾病',
        },
        {
          value: '肝硬化',
        },
        {
          value: '乙肝',
        },
        {
          value: '丙肝',
        },
        {
          value: '骨质疏松',
        },
        {
          value: '痛风',
        },
        {
          value: '关节病变',
        },
        {
          value: '哮喘',
        },
        {
          value: '过敏',
        },
        {
          value: '甲状腺疾病',
        },
        {
          value: '阿尔兹海默症',
        },
        {
          value: '帕金森氏症',
        },
        {
          value: '自身免疫性疾病',
        },
        {
          value: '脱发问项',
        },
        {
          value: '良性或恶性肿瘤',
        },
        {
          value: '良性或恶性肿瘤',
        },
        {
          value: '其他疾病',
        },
    ],
    TxE: [
        {
          value: '完全治愈',
        },
        {
          value: '大部分症状可以得到治愈或者缓解',
        },
        {
          value: '能一定程度的缓解不适症状',
        },
        {
          value: '短时间不能治愈或缓解但希望过段时间可以到达目标',
        },
        {
          value: '未想过能完全治愈或者缓解只是为了增强免疫力和体抗力，提高生活质量和水平',
        },
        {
          value: '保健目的',
        },
    ],
    remark1:"",
    remark2:"",
    remark3:"",
    remark4:"",
  }
});

onMounted(() => {
  if(!props.infoData.user_id){

    edit_info()
  }else{
    on_ref()
  }
})

function update_info() {
  data.card_loading = true
  api.getCustomerTable({
    user_id: props.infoData.user_id,
  }).then((res) => {
    if(res.data){
      data.select_customer = res.data
    }
    data.card_loading = false
  })
  return true
}

function save_info() {
  data.select_customer.user_id = props.infoData.user_id
  
  // 合并已保存的文件和新上传的文件
  let allFiles = []
  
  // 添加已保存的文件
  if (data.select_customer.files && data.select_customer.files.length > 0) {
    allFiles = [...data.select_customer.files]
  }
  
  // 添加新上传的文件
  if (data.files && data.files.length > 0) {
    const newFiles = data.files.map(item => {
      // 处理上传后的文件URL
      if (item.url) {
        return item.url
      } else if (item.response && item.response.data && item.response.data.url) {
        return item.response.data.url
      }
      return null
    }).filter(url => url !== null)
    
    allFiles = [...allFiles, ...newFiles]
  }
  
  // 更新文件列表
  data.select_customer.files = allFiles
  
  // 处理数据类型，确保数字字段保持数字类型
  const processedData = { ...data.select_customer }
  
  // 数字字段列表
  const numericFields = ['age', 'height', 'weight', 'BMI', 'blood', 'pulse', 'CE', 'RSD', 'GI', 'GUD', 'MSD', 'AID', 'CI', 'GYN', 'FMHx']
  
  // 处理数字字段
  numericFields.forEach(field => {
    if (processedData[field] !== null && processedData[field] !== undefined && processedData[field] !== '') {
      const numValue = parseFloat(processedData[field])
      if (!isNaN(numValue)) {
        processedData[field] = numValue
      }
    } else if (processedData[field] === '') {
      processedData[field] = null
    }
  })
  
  console.log('处理后的数据:', processedData)
  
  api.updateCustomerTable(processedData).then((res) => {
      message.success('编辑成功')
      emit('call-parent')
      cancel_info()
      on_ref()
  })
  return true
}

function get_config() {
  if (data.config.length === 0) {
    api.getConfig().then((res) => {
      data.config = res.data
    })
    api.getUserList().then((res) => {
      data.user_all = res.data
    })
  }
}

const handleFinish = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}

function on_ref() {
  update_info()
}

function edit_info() {
  get_config()
  data.is_edit = true
}

function cancel_info() {
  data.is_edit = false
  // 清空新上传的文件列表
  data.files = []
}

// 获取文件名
function getFileName(fileUrl) {
  if (!fileUrl) return '未知文件'
  try {
    // 从URL中提取文件名
    const url = new URL(fileUrl)
    const pathname = url.pathname
    const fileName = pathname.split('/').pop()
    return fileName || '未知文件'
  } catch (error) {
    // 如果URL解析失败，尝试从字符串中提取文件名
    const parts = fileUrl.split('/')
    const fileName = parts[parts.length - 1]
    return fileName || '未知文件'
  }
}

// 下载文件
function downloadFile(fileUrl) {
  if (!fileUrl) {
    message.error('文件链接无效')
    return
  }
  
  try {
    // 创建一个临时的a标签来触发下载
    const link = document.createElement('a')
    link.href = fileUrl
    link.target = '_blank'
    link.download = getFileName(fileUrl)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    message.success('开始下载文件')
  } catch (error) {
    console.error('下载文件失败:', error)
    message.error('下载文件失败')
  }
}

// 计算年龄的函数
function calculateAge(birthDate) {
  if (!birthDate) {
    return ''
  }
  
  try {
    const birth = new Date(birthDate)
    const today = new Date()
    
    // 检查日期是否有效
    if (isNaN(birth.getTime())) {
      return ''
    }
    
    let age = today.getFullYear() - birth.getFullYear()
    const monthDiff = today.getMonth() - birth.getMonth()
    
    // 如果还没到生日，年龄减1
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
      age--
    }
    
    return age > 0 ? age : ''
  } catch (error) {
    console.error('计算年龄失败:', error)
    return ''
  }
}

// 监听出生年月变化，自动计算年龄
watch(() => data.select_customer.birth, (newBirth) => {
  if (newBirth && data.is_edit) {
    const age = calculateAge(newBirth)
    data.select_customer.age = age
  }
}, { immediate: false })

// 删除已保存的文件
function removeSavedFile(index) {
  if (data.select_customer.files && data.select_customer.files.length > index) {
    data.select_customer.files.splice(index, 1)
    message.success('文件已删除')
  }
}

// 删除新上传的文件
function removeNewFile(index) {
  if (data.files && data.files.length > index) {
    data.files.splice(index, 1)
    message.success('文件已删除')
  }
}

</script>

<template>
    <NScrollbar style="position:relative;height:calc(100vh - 106px);padding-bottom: 60px">
      <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);overflow: auto; ">
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <n-h6 prefix="bar" style="margin: 0;font-size: 18px">基础信息</n-h6>
          </template>
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="left" bordered :column="4">
              <n-descriptions-item label="到院时间">
                <span v-if="!data.is_edit">{{ data.select_customer.bi_date }}</span>
                <n-date-picker  v-else
                                      v-model:formatted-value="data.select_customer.bi_date"
                                      value-format="yyyy-MM-dd"
                                      type="date"
                                      clearable
                                      placeholder="到院时间"
                                    />
              </n-descriptions-item>
              <n-descriptions-item label="客户姓名">
                <span v-if="!data.is_edit">{{ data.select_customer.name }}</span>
                <n-input v-else v-model:value="data.select_customer.name"/>
              </n-descriptions-item>
              <n-descriptions-item label="电话">
                <span v-if="!data.is_edit">{{ data.select_customer.mobile }}</span>
                <n-input v-else v-model:value="data.select_customer.mobile"/>
              </n-descriptions-item>
              <n-descriptions-item label="出生年月">
                <span v-if="!data.is_edit">{{ data.select_customer.birth }}</span>
                <n-date-picker  v-else
                                      v-model:formatted-value="data.select_customer.birth"
                                      value-format="yyyy-MM-dd"
                                      type="date"
                                      clearable
                                      placeholder="出生年月"
                                    />
              </n-descriptions-item>
              <n-descriptions-item label="年龄">
                <span v-if="!data.is_edit">{{ data.select_customer.age }}</span>
                <n-input v-else v-model:value="data.select_customer.age"/>
              </n-descriptions-item>
              <n-descriptions-item label="性别">
                <span v-if="!data.is_edit">{{ data.select_customer.sex }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.sex" name="radiogroup">
                  <n-space>
                    <n-radio v-for="sex in data.table_select.sexs" :key="sex.value" :value="sex.value">
                      {{ sex.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="身高(cm)">
                <span v-if="!data.is_edit">{{ data.select_customer.height }}</span>
                <n-input v-else v-model:value="data.select_customer.height" placeholder="身高(cm)"/>
              </n-descriptions-item>
              <n-descriptions-item label="体重(kg)">
                <span v-if="!data.is_edit">{{ data.select_customer.weight }}</span>
                <n-input v-else v-model:value="data.select_customer.weight" placeholder="体重(kg)"/>
              </n-descriptions-item>
              <n-descriptions-item label="BMI(kg/m2)">
                <span v-if="!data.is_edit">{{ data.select_customer.BMI }}</span>
                <n-input v-else v-model:value="data.select_customer.BMI" placeholder="BMI(kg/m2)"/>
              </n-descriptions-item>
              <n-descriptions-item label="血压(mmHg)">
                <span v-if="!data.is_edit">{{ data.select_customer.blood }}</span>
                <n-input v-else v-model:value="data.select_customer.blood" placeholder="血压(mmHg)"/>
              </n-descriptions-item>
              <n-descriptions-item label="脉搏(次/分)">
                <span v-if="!data.is_edit">{{ data.select_customer.pulse }}</span>
                <n-input v-else v-model:value="data.select_customer.pulse" placeholder="脉搏(次/分)"/>
              </n-descriptions-item>
              <n-descriptions-item label="主诉" >
                <span v-if="!data.is_edit">{{ data.select_customer.complaint }}</span>
                <n-input type="textarea"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }" v-else v-model:value="data.select_customer.complaint" placeholder="主诉"/>
              </n-descriptions-item>
              <n-descriptions-item label="检测项目">
                <span v-if="!data.is_edit">{{ data.select_customer.test }}</span>
                <n-input type="textarea"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }" v-else v-model:value="data.select_customer.test" placeholder="检测项目"/>
              </n-descriptions-item>
              <n-descriptions-item label="方案建议">
                <span v-if="!data.is_edit">{{ data.select_customer.solution }}</span>
                <n-input type="textarea"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }" v-else v-model:value="data.select_customer.solution" placeholder="方案建议"/>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <n-h6 prefix="bar" style="margin: 0;font-size: 18px">现病史</n-h6>
          </template>
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="left" bordered :column="3">
              <n-descriptions-item label="循环内分泌">
                <span v-if="!data.is_edit">{{ data.select_customer.CE }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.CE">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.CE" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
              <n-descriptions-item label="呼吸系统疾病">
                <span v-if="!data.is_edit">{{ data.select_customer.RSD }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.RSD" name="radiogroup">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.RSD" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
              <n-descriptions-item label="消化系统疾病">
                <span v-if="!data.is_edit">{{ data.select_customer.GI }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.GI" name="radiogroup">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.GI" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
              <n-descriptions-item label="泌尿系统疾病">
                <span v-if="!data.is_edit">{{ data.select_customer.GUD }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.GUD" name="radiogroup">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.GUD" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
              <n-descriptions-item label="运动系统疾病">
                <span v-if="!data.is_edit">{{ data.select_customer.MSD }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.MSD" name="radiogroup">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.MSD" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
              <n-descriptions-item label="自身免疫疾病">
                <span v-if="!data.is_edit">{{ data.select_customer.AID }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.AID" name="radiogroup">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.AID" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
              <n-descriptions-item label="重大疾病">
                <span v-if="!data.is_edit">{{ data.select_customer.CI }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.CI" name="radiogroup">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.CI" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
              <n-descriptions-item label="妇科">
                <span v-if="!data.is_edit">{{ data.select_customer.GYN }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.GYN" name="radiogroup">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.GYN" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
              <n-descriptions-item label="备注">
                <span v-if="!data.is_edit">{{ data.select_customer.remark1 }}</span>
                <n-input type="textarea"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }" v-else v-model:value="data.select_customer.remark1" placeholder=""/>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <n-h6 prefix="bar" style="margin: 0;font-size: 18px">现病史</n-h6>
          </template>
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="left" bordered :column="3">
              <n-descriptions-item label="既往病史">
                <span v-if="!data.is_edit">{{ data.select_customer.PMH }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.PMH" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.PMH" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="手术史">
                <span v-if="!data.is_edit">{{ data.select_customer.SHx }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.SHx" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.SHx" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="过敏史">
                <span v-if="!data.is_edit">{{ data.select_customer.AH }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.AH" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.AH" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="哮喘史">
                <span v-if="!data.is_edit">{{ data.select_customer.ASHx }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.ASHx" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.ASHx" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="药物服用史">
                <span v-if="!data.is_edit">{{ data.select_customer.Meds_Hx }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.Meds_Hx" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.Meds_Hx" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="输血史">
                <span v-if="!data.is_edit">{{ data.select_customer.BTHx }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.BTHx" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.BTHx" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="激素医生史">
                <span v-if="!data.is_edit">{{ data.select_customer.HTHx }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.HTHx" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.HTHx" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="备注">
                <span v-if="!data.is_edit">{{ data.select_customer.remark2 }}</span>
                <n-input type="textarea"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }" v-else v-model:value="data.select_customer.remark2" placeholder=""/>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <n-h6 prefix="bar" style="margin: 0;font-size: 18px">生活习惯</n-h6>
          </template>
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="left" bordered :column="3">
              <n-descriptions-item label="饮酒">
                <span v-if="!data.is_edit">{{ data.select_customer.ETOH }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.ETOH" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.ETOH" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="吸烟">
                <span v-if="!data.is_edit">{{ data.select_customer.SMK }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.SMK" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.SMK" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="饮食">
                <span v-if="!data.is_edit">{{ data.select_customer.DIET }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.DIET" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.DIET" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="运动">
                <span v-if="!data.is_edit">{{ data.select_customer.EX }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.EX" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.EX" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="护士频率">
                <span v-if="!data.is_edit">{{ data.select_customer.PE_Freq }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.PE_Freq" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.PE_Freq" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="储存细胞类别">
                <span v-if="!data.is_edit">{{ data.select_customer.SCT }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.SCT" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.SCT" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="储存者">
                <span v-if="!data.is_edit">{{ data.select_customer.DON }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.DON" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.DON" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="备注">
                <span v-if="!data.is_edit">{{ data.select_customer.remark3 }}</span>
                <n-input type="textarea"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }" v-else v-model:value="data.select_customer.remark3" placeholder=""/>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <n-h6 prefix="bar" style="margin: 0;font-size: 18px">月经史(女性客户)</n-h6>
          </template>
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="left" bordered :column="3">
              <n-descriptions-item label="月经史">
                <span v-if="!data.is_edit">{{ data.select_customer.LMP }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.LMP" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.LMP" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="使用滋补药物或食物">
                <span v-if="!data.is_edit">{{ data.select_customer.TON }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.TON" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.TON" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <n-h6 prefix="bar" style="margin: 0;font-size: 18px">婚育史</n-h6>
          </template>
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="left" bordered :column="3">
              <n-descriptions-item label="婚育史">
                <span v-if="!data.is_edit">{{ data.select_customer.OBHx }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.OBHx" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.OBHx" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="是否备孕">
                <span v-if="!data.is_edit">{{ data.select_customer.TTC }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.TTC" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.TTC" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
              <n-descriptions-item label="是否怀孕或哺乳期">
                <span v-if="!data.is_edit">{{ data.select_customer.PREG }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.PREG" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.PREG" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <n-h6 prefix="bar" style="margin: 0;font-size: 18px">家族史</n-h6>
          </template>
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="left" bordered :column="3">
              <n-descriptions-item label="家族病史">
                <span v-if="!data.is_edit">{{ data.select_customer.FMHx }}</span>
                <n-checkbox-group v-else v-model:value="data.select_customer.FMHx" name="radiogroup">
                  <n-space>
                    <n-checkbox v-for="item in data.table_select.FMHx" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-checkbox>
                  </n-space>
                </n-checkbox-group>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="left" bordered :column="3">
              <n-descriptions-item label="医生效果期望值">
                <span v-if="!data.is_edit">{{ data.select_customer.TxE }}</span>
                <n-radio-group v-else v-model:value="data.select_customer.TxE" name="radiogroup">
                  <n-space>
                    <n-radio v-for="item in data.table_select.TxE" :key="item.value" :value="item.value">
                      {{ item.value }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="right" bordered :column="3">
              <n-descriptions-item label="备注">
                <span v-if="!data.is_edit">{{ data.select_customer.remark4 }}</span>
                <n-input type="textarea"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }" v-else v-model:value="data.select_customer.remark4" placeholder=""/>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
        <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}">
          <div class="info1">
            <n-descriptions style="width: 100%;" label-placement="right" bordered :column="3">
              <n-descriptions-item label="客户资料">
                <div v-if="!data.is_edit">
                  <div v-if="data.select_customer.files && data.select_customer.files.length > 0" class="file-list">
                    <div v-for="(file, index) in data.select_customer.files" :key="index" class="file-item">
                      <n-button 
                        type="info" 
                        text 
                        @click="downloadFile(file)"
                        style="margin: 2px;"
                      >
                        <TheIcon icon="material-symbols:download" :size="16" class="mr-2"/>
                        {{ getFileName(file) }}
                      </n-button>
                    </div>
                  </div>
                  <span v-else style="color: #999;">暂无文件</span>
                </div>
                <div v-else>
                  <!-- 显示已保存的文件 -->
                  <div v-if="data.select_customer.files && data.select_customer.files.length > 0" class="file-list">
                    <div v-for="(file, index) in data.select_customer.files" :key="'saved-' + index" class="file-item">
                      <n-button 
                        type="info" 
                        text 
                        @click="downloadFile(file)"
                        style="margin: 2px;"
                      >
                        <TheIcon icon="material-symbols:download" :size="16" class="mr-2"/>
                        {{ getFileName(file) }}
                      </n-button>
                      <n-button 
                        type="error" 
                        text 
                        @click="removeSavedFile(index)"
                        style="margin: 2px;"
                        size="small"
                      >
                        <TheIcon icon="material-symbols:delete" :size="14"/>
                      </n-button>
                    </div>
                  </div>
                  
                  <!-- 显示新上传的文件 -->
                  <div v-if="data.files && data.files.length > 0" class="file-list">
                    <div v-for="(file, index) in data.files" :key="'new-' + index" class="file-item">
                      <n-button 
                        type="success" 
                        text 
                        @click="downloadFile(file.url || file.response?.data?.url)"
                        style="margin: 2px;"
                      >
                        <TheIcon icon="material-symbols:download" :size="16" class="mr-2"/>
                        {{ file.name || getFileName(file.url || file.response?.data?.url) }}
                      </n-button>
                      <n-button 
                        type="error" 
                        text 
                        @click="removeNewFile(index)"
                        style="margin: 2px;"
                        size="small"
                      >
                        <TheIcon icon="material-symbols:delete" :size="14"/>
                      </n-button>
                    </div>
                  </div>
                  
                  <!-- 上传新文件 -->
                  <n-upload :headers="{ authorization: data.token }" v-model:file-list="data.files" multiple :action="data.uploadAction" @finish="handleFinish">
                    <n-button>上传新文件</n-button>
                  </n-upload>
                </div>
              </n-descriptions-item>
            </n-descriptions>
          </div>
        </n-card>
      </n-spin>


      <div class="tools">
        <n-button v-if="!data.is_edit" type="primary" size="large" style="margin-left:10px" @click="edit_info">
          <TheIcon icon="material-symbols:save-sharp" :size="18" class="mr-5"/>
          编辑
        </n-button>
        <n-button v-if="data.is_edit&&!data.add_mode" type="primary" size="large" style="margin-left:10px" @click="cancel_info">
          <TheIcon icon="material-symbols:cancel" :size="18" class="mr-5"/>
          取消编辑
        </n-button>

        <n-button v-if="data.is_edit" type="primary" size="large" style="margin-left:10px" @click="save_info">
          <TheIcon icon="material-symbols:save-sharp" :size="18" class="mr-5"/>
          保存
        </n-button>
      </div>
    </NScrollbar>

</template>

<style scoped>
.tools{
  position: absolute;
  bottom:0;right:0;
  width:100%;
  height:60px;
  background: #f3f3f3;
  z-index: 99;
  display: flex;
  align-items: center
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.file-item {
  display: inline-block;
}

.file-item .n-button {
  border: 1px solid #e0e0e6;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  transition: all 0.2s;
}

.file-item .n-button:hover {
  background-color: #f0f9ff;
  border-color: #18a058;
  color: #18a058;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px;
}

.file-item .n-button {
  display: flex;
  align-items: center;
  gap: 4px;
}
.info1 {
  width: 100%;
  padding: 20px;
  display: flex;

  .data_card {
    width: 25%;
    height: 100px;
    margin-right: 20px;
    background: rgba(200, 115, 115, 0.2);
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .icon {
      margin-right: 20px;
      background: rgba(200, 115, 115, 1);
      padding: 5px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .con {
      line-height: 20px;
      font-size: 25px;
      color: rgba(200, 115, 115, 1);

      .tag {
        font-size: 14px;
        color: #000;
        font-weight: normal;
      }
    }
  }
}
</style>